import React, { useState, useEffect } from 'react';
import { Table, Button, Modal, Form, Input } from 'antd';
import { connect } from 'umi'

const StudentManagement = ({ studentList, dispatch, userInfo,location }) => {//把dispatch、studentList、userInfo从props中解构出来
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [editingStudent, setEditingStudent] = useState(null);
    const [form] = Form.useForm();
    console.log(userInfo)
    console.log(location.pathname)
    const showModal = (student) => {//点击编辑按钮时，将当前行的学生信息传递给showModal函数
        form.setFieldsValue(student);
        setEditingStudent(student);
        setIsModalVisible(true);
    };

    const handleOk = (values) => {
        if (editingStudent) {
            dispatch({//使用dispatch函数来触发更新学生信息的action
                type: 'studentManagement/updateStudent',
                payload: { id: editingStudent.id, ...values }
            })
        } else {
            dispatch({
                type: 'studentManagement/addStudent',
                payload: values
            })
        }
        setIsModalVisible(false);
        setEditingStudent(null);
        form.resetFields();
    };
    const handleCancel = () => {
        setIsModalVisible(false);
        setEditingStudent(null);
        form.resetFields();
    }

    const handleDelete = (id) => {
        dispatch({
            type: 'studentManagement/deleteStudent',
            payload: id
        })
    };

    const columns = [
        {
            title: '学号',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <>
                    <Button onClick={() => showModal(record)}>编辑</Button>
                    <Button onClick={() => handleDelete(record.id)} danger>删除</Button>
                </>
            ),
        },
    ];

    return (
        <div>
            <Button type="primary" onClick={() => showModal(null)}>新增学生</Button>
            <Table columns={columns} dataSource={studentList} rowKey="id" />
            <Modal
                title={editingStudent ? "编辑学生" : "新增学生"}
                open={isModalVisible}
                onCancel={handleCancel}
                footer={[
                    <Button key="back" onClick={handleCancel}>取消</Button>,
                    <Button key='submit' type="primary" onClick={() => form.submit()}>确定</Button>,
                ]}
            >
                <Form
                    form={form}
                    onFinish={handleOk}
                >
                    <Form.Item
                        name="name"
                        label="姓名"
                        rules={[{ required: true, message: '请输入姓名!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="age"
                        label="年龄"
                        rules={[{ required: true, message: '请输入年龄!' }]}
                    >
                        <Input type="number" />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};
//使用connect方法将state映射到props，原理是connect方法返回一个高阶组件，
//这个高阶组件会传入store，然后返回一个组件，这个组件的props中会包含store中的state
//studentManagement是命名空间，studentList是state中的属性
//第一个studentList是组件的props，第二个studentList是state中的属性
export default connect(({ studentManagement, user }) => ({
    studentList: studentManagement.studentList,
    userInfo: user.userInfo
}))(StudentManagement);
